<template>
    <div class="ls-add-admin">
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" :content="mode == 'edit' ? '编辑分销等级' : '新增分销等级'" />
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">等级信息</div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- 等级名称 -->
                <el-form-item label="等级名称" required>
                    <el-input :disabled="disabled" class="ls-input" v-model="form.name" placeholder="请输入等级名称">
                    </el-input>
                </el-form-item>

                <!-- 等级级别 -->
                <el-form-item label="权重" required>
                    <el-input :disabled="disabled" class="ls-input" v-model="form.weights" placeholder="请输入等级级别">
                    </el-input>
                    <span class="desc">权重数字越大表示权重越高，权重不能相同。填写大于1的整数。</span>
                </el-form-item>

                <el-form-item label="等级描述">
                    <el-input
                        type="textarea"
                        :disabled="disabled"
                        placeholder="请输入内容"
                        style="width: 400px"
                        rows="8"
                        v-model="form.remark"
                        maxlength="30"
                        show-word-limit
                    />
                </el-form-item>
            </el-form>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">等级佣金收益 <span class="desc">以下收益不填写时，不产生收益</span></div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- 一级佣金比例 -->
                <el-form-item label="直推">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.direct_award.rate"
                        placeholder="请输入直推"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="直推见点">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.direct_see_point_award.rate"
                        placeholder="请输入直推见点"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="间推见点可提现">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.inter_see_point_balace_award.rate"
                        placeholder="请输入间推见点可提现"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="间推见点不可提现">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.inter_see_point_not_balace_award.rate"
                        placeholder="请输入间推见点不可提现"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="分享奖">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.share_award.rate"
                        placeholder="请输入分享收益"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="绩效奖">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.merit_award.rate"
                        placeholder="请输入绩效收益"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="伯乐奖">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.bole_award.rate"
                        placeholder="请输入伯乐收益"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="加权分红奖">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.weighted_dividends_award.rate"
                        placeholder="加权分红奖"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="落地包裹">
                    <el-input
                        :disabled="disabled"
                        class="ls-input"
                        v-model="form.benefit.landing_package_award.rate"
                        placeholder="落地包裹"
                    >
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item> -->
            </el-form>
        </div>
        <div class="ls-card ls-coupon-edit__form m-t-10" v-if="false">
            <div class="nr weight-500 m-b-20">升级条件</div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <!-- 等级条件 -->
                <el-form-item label="等级条件">
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="1">积累消费</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="2">指定商品</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="3">业绩达标标准</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="4">直推会员达标标准</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="5">手动选择等级</el-radio>
                    <el-radio :disabled="disabled" v-model="form.update_relation" :label="6">注册默认等级</el-radio>
                </el-form-item>

                <!-- 消费金额 -->
                <el-form-item label="" v-if="form.update_relation == 1">
                    <div class="m-b-10">
                        累计消费金额<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.update_condition.free_money"
                            placeholder=""
                        >
                            <template slot="append">元</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item v-if="form.update_relation == 2 || form.update_relation == 4">
                    <goods-select
                        v-model="selectGoods"
                        mode="table"
                        :limit="1"
                        :showVirtualGoods="true"
                        :is-spec="true"
                        type="single"
                    >
                        <el-button size="mini" type="primary">选择指定商品</el-button>
                    </goods-select>
                    <div v-if="goodsInfo.id > 0">
                        <div class="m-b-10">商品名称：{{ goodsInfo.name }}</div>
                        <div class="m-b-10">
                            商品图片：
                            <el-image
                                class="flex-none"
                                style="width: 88px; height: 88px"
                                :src="goodsInfo.image"
                                fit="cover"
                            />
                        </div>
                    </div>
                    <br />

                    <el-form-item>
                        <span style="margin-right: 12px">判断条件</span>
                        <el-select
                            v-model="form.update_condition.condition"
                            placeholder="请选择判断条件"
                            class="m-b-10"
                        >
                            <el-option
                                v-for="item in condition"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="m-b-10">
                            商品达标金额<el-input
                                :disabled="disabled"
                                class="ls-input m-l-10"
                                v-model="form.update_condition.goods_amount"
                                placeholder=""
                            >
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </el-form-item>
                </el-form-item>
                <div v-if="form.update_relation == 3">
                    <el-form-item label="">
                        <div class="m-b-10">
                            业绩达标金额<el-input
                                :disabled="disabled"
                                class="ls-input m-l-10"
                                v-model="form.update_condition.performance_amount"
                                placeholder=""
                            >
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
                <div v-if="form.update_relation == 4">
                    <el-form-item label="">
                        <div class="m-b-10">
                            直推达标人数<el-input
                                :disabled="disabled"
                                class="ls-input m-l-10"
                                v-model="form.update_condition.number"
                                placeholder=""
                            >
                                <template slot="append">个</template>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <span style="margin-right: 12px">直推达标等级</span>
                        <el-select v-model="form.update_condition.weights" placeholder="请选择等级" class="m-b-10">
                            <el-option
                                v-for="item in distributionLevel"
                                :key="item.weights"
                                :label="item.name"
                                :value="item.weights"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">等级权益</div>
            <div class="card-content m-t-24">
                <el-form ref="form" :model="form" label-width="120px" size="small">
                    <el-form-item label="等级折扣" prop="level_discount">
                        <div>
                            <span class="m-r-5">参与等级折扣</span>
                            <el-input
                                class="ls-input"
                                v-model="form.discount"
                                size="small"
                                :disabled="disabled"
                            ></el-input>
                            <span class="m-l-5">折</span>
                        </div>
                        <div class="muted xs m-r-16">
                            购买符合条件的商品时，可以使用等级折扣进行优惠。填写0到10之间的数字，可以保留小数点2位数字
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="ls-card ls-coupon-edit__form m-t-10">
            <div class="nr weight-500 m-b-20">福利赠送 <span class="desc">分销商升级后立马赠送</span></div>
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="">
                    <div class="m-b-10">
                        赠送积分<el-input
                            :disabled="disabled"
                            class="ls-input m-l-10"
                            v-model="form.welfare.points"
                            placeholder=""
                        >
                            <template slot="append">点</template>
                        </el-input>
                    </div>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer flex row-center">
            <div class="row-center flex">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" :disabled="disabled" @click="onSubmit('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import GoodsSelect from '@/components/goods-select/index1.vue'
import {
    apiDistributionGradeAdd,
    apiDistributionGradeDetail,
    apiDistributionGradeEdit,
    apiDistributionGradeLists
} from '@/api/distribution/distribution'
import Template from '@/views/shop/pages/template.vue'

@Component({
    components: {
        Template,
        GoodsSelect
    }
})
export default class DistributionGradeEdit extends Vue {
    /** S Data **/
    identity: number | null = null // 当前编辑用户的身份ID  valid: mode = 'edit'
    roleList: Array<object> = [] // 角色的数据

    mode: any
    id: any
    distributionLevel: any = []
    condition = [
        { id: '>', name: '>' },
        { id: '>=', name: '>=' },
        { id: '=', name: '=' },
        { id: '<', name: '<' },
        { id: '<=', name: '<=' }
    ]
    flag: any = 1
    disabled: any = false
    //多选
    // goodsInfo: any = []
    //单选
    goodsInfo: any = {
        id: 0,
        name: '',
        price: '¥0.00',
        image: ''
    }
    general: any = {}
    ladder: any = []
    // 添加管理员表单数据
    form: any = {
        name: '', //是	string	等级名称
        weights: '', //是	integer	等级级别 须大于1
        // first_ratio: '', //是	decimal	一级佣金比例 1-100之间，保留2位小数
        update_relation: 1, //是	integer	升级条件 1-积累消费 2-购买指定商品 3-业绩达标标准
        goods_id: 0,
        update_condition: {
            free_money: '', //否	decimal	累计消费金额
            goods_id: '', //否	integer	购买指定商品
            performance_amount: '', //否	decimal	业绩达标标准,
            goods_amount: '', //否	decimal	业绩达标标准,
            condition: '>=', //否	decimal	业绩达标标准,
            number: '', //否	decimal	业绩达标标准,
            weights: ''
        },
        benefit: {
            direct_award: {
                rate: ''
            },
            direct_see_point_award: {
                rate: ''
            },
            inter_see_point_balace_award: {
                rate: ''
            },
            inter_see_point_not_balace_award: {
                rate: ''
            },

            share_award: {
                rate: '' //直推利率
            },
            merit_award: {
                rate: '' //直推利率
            },
            bole_award: {
                rate: '' //直推利率
            },
            weighted_dividends_award: {
                rate: '' //直推利率
            },
            landing_package_award: {
                rate: '' //直推利率
            }

            // repurchase: {
            //     rate: '' //复购商品利率
            // }
        },
        welfare: {
            contribution: '',
            points: '',
            balance: ''
        },
        discount: '',
        remark: '' //否	string	等级备注
    }
    selectGoods: any = [] //商品选择的商品数据
    /**
     *  {
     *             "code":"1231244213",
     *             "id":27,
     *             "image":"http://www.myproject.com/uploads/images/20240408/20240408140445daf6c9569.jpeg",
     *             "is_discount":0,
     *             "is_distribution":1,
     *             "item":[3],
     *             "lineation_price":"0.00",
     *             "max_lineation_price":"0.00",
     *             "max_price":399,
     *             "name":"推广商品多规格",
     *             "price":"¥377.00",
     *             "sales_num":3,
     *             "sell_price":"377.00",
     *             "spec_type":2,
     *             "total_stock":2994
     *         }
     */
    /** E Data **/
    @Watch('selectGoods', { deep: true })
    //多选
    // selectGoodsChange(val: any) {
    //     this.form.update_condition.goods_id = []
    //     for (let x in val) {
    //         this.form.update_condition.goods_id.push(val[x].id)
    //     }
    // }
    //单选
    selectGoodsChange(val: any) {
        this.form.update_condition.goods_id = val.id
        this.form.goods_id = val.id
        this.goodsInfo = val
    }
    /** S Methods **/
    // 点击表单提交
    onSubmit(formName: string) {
        // 请求发送
        switch (this.mode) {
            case 'add':
                return this.GradeAdd()
            case 'edit':
                return this.GradeEdit()
        }
    }

    // 编辑
    GradeEdit() {
        apiDistributionGradeEdit({ ...this.form }).then(() => {
            this.$router.go(-1)
        })
    }

    // 添加
    GradeAdd() {
        apiDistributionGradeAdd({ ...this.form }).then(() => {
            this.$router.go(-1)
        })
    }
    addLadderItem() {
        if (this.ladder >= 5) {
            return
        }
        this.ladder.push({
            number: '',
            rate: ''
        })
    }
    removeLadderItem(index: number) {
        if (this.form.benefit.direct.ladder.length <= 1) {
            return this.$message.error('至少有一个选项')
        }
        this.form.benefit.direct.ladder.splice(index, 1)
    }
    // 详情
    detail() {
        apiDistributionGradeDetail({ id: this.id })
            .then(res => {
                this.form = Object.assign(this.form, res)
                // this.form.benefit.level.type = parseInt(this.form.benefit.level.type)
                this.goodsInfo = res.goodsInfo
                this.selectGoods = res.goods_list
            })
            .catch(err => {
                console.log(err)
                this.$message.error('数据获取失败1!')
            })
    }
    getDistributionLevelList() {
        apiDistributionGradeLists({})
            .then(res => {
                let lists = res.lists
                for (let x in lists) {
                    let params = { weights: '', name: '' }
                    params.weights = lists[x].weights.toString()
                    params.name = lists[x].name
                    this.distributionLevel.push(params)
                }
            })
            .catch(err => {
                this.$message.error('数据获取失败!')
            })
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        const query: any = this.$route.query

        if (query.mode) {
            this.mode = query.mode
        }
        if (query.flag) {
            this.flag = query.flag
        }
        if (query.disabled) {
            this.disabled = true
        }
        this.getDistributionLevelList()
        // 编辑模式：初始化数据
        if (this.mode === 'edit') {
            this.id = query.id
            this.detail()
        }

        // 获取角色列表
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.desc {
    color: #999;
    display: block;
}
.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 280px;
        margin-right: 20px;
    }
}
</style>
